<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="shortcut icon"  th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script>

    </script>
</head>
<body>
<div style="margin: auto; width: 1100px">
    <form class="layui-form layui-form-pane" action="">
        <fieldset class="layui-elem-field" style="margin-top: 20px; padding-left: 20px">
            <legend>基本信息</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">申请人</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${bookingTicketApplication.staff.name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">申请编号</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${bookingTicketApplication.numbering}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">申请时间</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${#dates.format(bookingTicketApplication.addTime,'yyyy-MM-dd')}" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">项目类型</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="出差项目" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${bookingTicketApplication.state}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">查看详情</button>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field" style="margin-top: 20px; padding-left: 20px" th:each="travelPeople:${bookingTicketApplication.ticketApplicationDetails}" th:if="${travelPeople.staff.name ne null} ">
            <legend>乘客</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">出发地</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.startLocation.name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">目的地</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.endLocation.name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出发时间</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${#dates.format(travelPeople.startTime,'yyyy-MM-dd')}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.staff.name}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.staff.card}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.staff.sex}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.staff.phone}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">交通工具</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.transportTypeName}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">坐席等级</label>
                    <div class="layui-input-inline">
                        <input type="text" readonly="readonly" th:value="${travelPeople.transportSeatLevelName}" autocomplete="off" class="layui-input">
                    </div>
                </div>


<!--                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">查看详情</button>-->
            </div>
        </fieldset>
        <fieldset class="layui-elem-field" style="margin-top: 20px; padding-left: 20px">
            <legend>备注</legend>
            <div class="layui-form-item">
                <div class="layui-form-item layui-form-text" style="padding-right: 20px">
                    <label class="layui-form-label">行程计划</label>
                    <div class="layui-input-block">
                        <textarea readonly="readonly" th:text="${bookingTicketApplication.remark}" class="layui-textarea" style="resize: none"></textarea>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field" style="margin-top: 20px; padding-left: 20px">
            <legend>审批进度</legend>
            <br>
            <ul th:each="data:${approvalLog}"  class="layui-timeline">

                <li th:if="${data.state == 0}" class="layui-timeline-item">
                    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">审核:&emsp;[[${data.staff.name}]] &nbsp;在&nbsp; [[${#dates.format(data.approvalTime,'yyyy-MM-dd HH:mm:ss')}]]&nbsp;[[${data.approvalInfo}]] &nbsp;驳回审批</div>
                    </div>
                </li>
                <li th:if="${data.state == 2}" class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">审核:&emsp;[[${data.staff.name}]] &nbsp;在&nbsp; [[${#dates.format(data.approvalTime,'yyyy-MM-dd HH:mm:ss')}]]&nbsp;[[${data.approvalInfo]] &nbsp;通过审批</div>
                    </div>
                </li>
            </ul>
        </fieldset>
    </form>
</div>
</body>
</html>